<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Boost.Beast WebSocket Chat Client</title>
</head>
<body>
  <h1>Boost.Beast WebSocket Chat Client</h1>
  <p>
    <a href="http://www.boost.org/libs/beast">Boost.Beast</a>
    <a href="http://www.boost.org/libs/beast/example/websocket/server/chat-multi">Source Code</a>
  </p>
  Server URI: <input class="draw-border" id="uri" size="47" value="ws://localhost:8080" style="margin-bottom: 5px;">
  <button class="echo-button" id="connect">Connect</button>
  <button class="echo-button" id="disconnect">Disconnect</button><br>
  Your Name: <input class="draw-border" id="userName" size=47 style="margin-bottom: 5px;"><br>
  <pre id="messages" style="width: 600px; height: 400px; white-space: normal; overflow: auto; border: solid 1px #cccccc; margin-bottom: 5px;"></pre>
  <div style="margin-bottom: 5px;">
    Message<br>
    <input class="draw-border" id="sendMessage" size="74" value="">
    <button class="echo-button" id="send">Send</button>
  </div>
  <script>
    var ws = null;
    function showMessage(msg) {
      messages.innerText += msg + "\n";
      messages.scrollTop = messages.scrollHeight - messages.clientHeight;
    };
    connect.onclick = function() {
      ws = new WebSocket(uri.value);
      ws.onopen = function(ev) {
        showMessage("[connection opened]");
      };
      ws.onclose = function(ev) {
        showMessage("[connection closed]");
      };
      ws.onmessage = function(ev) {
        showMessage(ev.data);
      };
      ws.onerror = function(ev) {
        showMessage("[error]");
        console.log(ev);
      };
    };
    disconnect.onclick = function() {
      ws.close();
    };
    send.onclick = function() {
      ws.send(userName.value + ": " + sendMessage.value);
      sendMessage.value = "";
    };
    sendMessage.onkeyup = function(ev) {
      ev.preventDefault();
      if (ev.keyCode === 13) {
        send.click();
      }
    }
  </script>
</body>
</html>
